<template>
	<view class="app-content">
		<view class="title">
			视频 
			<!-- <span class="tips">(视频第一张为封面)</span> -->
		</view>
		<view class="content">
			<view class="video-list" v-if="videoList.length>0">
				<view class="video-item" v-for="item,index in videoList" :key="index">
					<image src="https://pw.qyang.cc/static/delete.png" class="delete" @click="handleDelete(index)"></image>
					<video class="video" :src="rq.imgUrl(item)"></video>
				</view>				
			</view>
			<view class="btn" @click="chooseVideo">
				<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加视频
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: []
			};
		},
		onShow() {
			uni.$on('video',(data)=>{
				if(data){
					let files = data.split(',')
					this.videoList = files
				}
				
			})
		},
		onUnload() {
			uni.$off('video')
		},
		methods: {
			submit() {
				if(this.videoList.length<1){
					uni.showToast({
						title: `视频不能少于一条`,
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];

				uni.navigateBack({
					success: () => {
						prevPage.$vm.receiveVideo(this.videoList);
					}
				});
			},
			handleDelete(index){
				this.videoList.splice(index,1)
			},
			chooseVideo(){
				let _this = this
				uni.chooseVideo({
					sourceType:['album'],
					success:(res)=>{
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						getApp().uploadFile([res.tempFilePath],{},(url)=>{
							_this.videoList = [..._this.videoList,...url]
							uni.hideLoading()
						})
					},
					fail: (err) => {
						console.log('chooseVideo',err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.video-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.video-item{
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		position: relative;
		
		.delete{
			padding: 10rpx;
			position: absolute;
			z-index: 4;
			width: 32rpx;
			height: 32rpx;
			top:-22rpx;
			right: -22rpx;
		}
	}
	.video{
		width: 160rpx;
		height: 160rpx;
	}
	.content {
		padding: 15rpx 25rpx;
		display: flex;
		flex-wrap: wrap;
		.video-item{
			margin-right: 28rpx;
			margin-bottom: 28rpx;
		}

		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.title {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 22px;
		letter-spacing: 0px;

		font-variation-settings: "opsz" auto;
		color: #333333;
		padding: 20rpx 30rpx 0;

		.tips {
			font-family: 阿里巴巴普惠体;
			font-size: 10px;
			font-weight: normal;
			line-height: 22px;
			letter-spacing: 0px;

			color: #FF7681;
			margin-left: 10rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}
</style>